<template>
  <div class="todoapp">
    <TodoHeader  ></TodoHeader>
    <TodoMain  ></TodoMain>
    <TodoFooter ></TodoFooter>
  </div>
</template>

<script>
// 目标1: 渲染数据
// 1.1 在 App.vue 中准备数据并传入 TodoMain.vue
// 1.2 在子组件中使用 v-for 循环渲染 li
// 1.3 使用 v-model 绑定完成状态
// 1.4 使用动态 class 绑定完成样式

// 目标2: 添加数据
// 2.1 在 TodoHeader.vue 中给文本框双向绑定任务名
// 2.2 给文本框绑定键盘按下事件, 捕获 enter 键
// 2.3 当用户按下回车键时, 将数据传递给 App.vue 中
// 2.4 App.vue 接收到数据后, 将其添加至 list
// 2.5 在 TodoHeader.vue 中进行非空校验及添加后清空文本框

// 目标3: 删除数据
// 3.1 在 TodoMain.vue 中给删除按钮绑定点击事件, 传入 id
// 3.2 将 id 传给 App.vue - 子传父
// 3.3 App.vue 中根据 id 找到对应的数据删除

// 目标4: 统计数量
// 4.1 在 App.vue 中将 list 传入 TodoFooter.vue
// 4.2 使用插值表达式渲染即可

// 目标5: 切换数据
// 需求1: 点击高亮
// 5.1 在 TodoFooter.vue 中定义状态 isSel , 取值范围是 all/yes/no
// 5.2 动态绑定 class , 根据状态来决定哪个 a 标签应用 selected 类名
// 5.3 给 a 标签绑定点击事件, 点谁就切换对应的状态
// 需求2: 切换数据
// 5.4 在 TodoFooter.vue 中将 isSel 传递给 App.vue
// 5.5 父组件收到 isSel 后, 保存到 data 中
// 5.6 App.vue 中定义计算属性, 根据 isSel 的状态来筛选数据并返回

// 目标6: 清除已完成
// 6.1 在 TodoFooter.vue 中给清除已完成按钮绑定点击事件
// 6.2 事件触发时子传父, 触发父组件自定义事件, 执行删除已完成的业务逻辑
// 6.3 提供两种思路: 1. 找到未完成的数据, 加入新数组, 用新数组覆盖 this.list   2. 找到已完成的数据, 实时删除, 删除一个索引自减一

// 目标7: 数据缓存
// 7.1 在 App.vue 中深度侦听 list
// 7.2 当 list 改变时, 转成 JSON 字符串, 存入 localStorage 中
// 7.3 在 list 赋初始值时, 从 localStorage 中取出, 转成数组对象, 空值处理

// 目标8: 全选功能
// 需求1: 全选影响小选
// 8.1 在 TodoHeader.vue 中定义计算属性 isAll 完整写法
// 8.2 将全选框和 isAll 双向绑定
// 8.3 将 showList 从 App.vue 中传给 TodoHeader.vue
// 8.4 在 isAll 的 set 方法中将最新的状态设置给所有任务的 isDone 属性即可
// 需求2: 小选影响全选
// 8.5 在 TodoHeader.vue 中 isAll 的 get 方法里统计所有小选框的状态 (如果全部选中就返回 true , 只要有一个没选中就返回 false)
// 8.6 如果数组中没有数据, 直接返回 false


// 引入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import { mapState } from 'vuex'
export default {
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data() {
    return {
    }
  },
  methods: {
   
  },
  computed: {
    ...mapState('TodoMain',['list'])
  },
  watch: {
    list: {
      deep: true,
      handler() {
        // 当数组的数据变化时存入本地
        localStorage.setItem('todolist', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>